<template>
	<view>
		<div class="odiput">
			<div class="odiv">
				<span>公司地区<span class="xxing">*</span></span>
				<span>
					<picker mode="multiSelector" @change="bindRegionChange" @columnchange="bindMultiPickerColumnChange"
						:value="valueRegion" :range="multiArray">
						<view class='acea-row'>
							<view class="picker">{{region[0]}}，{{region[1]}}，{{region[2]}}</view>
							<view class='iconfont icon-dizhi fontcolor'></view>
						</view>
					</picker>
				</span>
			</div>
			
			<div class="odiv">
				<span>详细地址<span class="xxing">*</span></span>
				<span>
					<input type="text" placeholder="请填写具体地址" v-model="addmine">
				</span>
			</div>
		</div>
		<div class="bacoc" @click="baoc">保存</div>
	</view>
</template>

<script>
	import {
		getAddressDetail
	} from '@/api/user.js';
	import {
		getCity
	} from '@/api/api.js';
	import {
		toLogin
	} from '@/libs/login.js';
	import {
		mapGetters
	} from "vuex";
	
	
	import colors from '@/mixins/color.js';
	export default {
		mixins: [colors],
		data() {
			return {
				cartId: '', //购物车id
				pinkId: 0, //拼团id
				couponId: 0, //优惠券id
				id: 0, //地址id
				userAddress: {
					is_default: false
				}, //地址详情
				region: [this.$t(`省`), this.$t(`市`), this.$t(`区`)],
				valueRegion: [0, 0, 0],
				isAuto: false, //没有授权的不会自动授权
				isShowAuth: false, //是否隐藏授权
				district: [],
				multiArray: [],
				multiIndex: [0, 0, 0],
				cityId: 0,
				defaultRegionCode: '110101',
				news: '',
				noCoupon: 0,
				addmine:'',
			};
		},
		onShow() {
			this.getUserAddress();
		},
		computed: mapGetters(['isLogin']),
		watch: {
			isLogin: {
				handler: function(newV, oldV) {
					if (newV) {
						this.getUserAddress();
					}
				},
				deep: true
			}
		},
		// 授权回调
		onLoadFun: function() {
			this.getUserAddress();
		},
		onLoad(options) {
			if (this.isLogin) {
				this.cartId = options.cartId || '';
				this.pinkId = options.pinkId || 0;
				this.couponId = options.couponId || 0;
				this.id = options.id || 0;
				this.noCoupon = options.noCoupon || 0;
				this.news = options.new || '';
				uni.setNavigationBarTitle({
					title: options.id ? this.$t(`修改地址`) : this.$t(`添加地址`)
				})
				this.getUserAddress();
				this.getCityList();
			} else {
				toLogin();
			}
		},
		methods:{
			baoc(){
				if (this.region[0] == this.$t(`省`)) return this.$util.Tips({
					title: this.$t(`请选择所在地区`)
				});
				if (!this.addmine) return this.$util.Tips({
					title: this.$t(`请填写详细地址`)
				});
				uni.setStorageSync('addmin',this.addmine)
				uni.setStorageSync('regio',this.region)
				uni.navigateBack({
					delta:1
				})
				
				// uni.navigateTo({
				// 	detail:1,
				// 	// url:'/pages/userminp/myisboss/myisboss?addmin='+this.addmine+'&regio='+this.region
				// })
			},
			// #ifdef APP-PLUS
			// 获取选择的地区
			handleGetRegion(region) {
				this.region = region
			},
			// #endif
			// 回去地址数据
			getCityList: function() {
				let that = this;
				getCity().then(res => {
					this.district = res.data
					that.initialize();
				})
			},
			initialize() {
				let that = this,
					province = [],
					city = [],
					area = [];
				let cityChildren = that.district[0].c || [];
				let areaChildren = cityChildren.length ? (cityChildren[0].c || []) : [];
				that.district.forEach((item, i) => {
					province.push(item.n);
					if (item.n === this.region[0]) {
						this.valueRegion[0] = i
						this.multiIndex[0] = i
					}
				});
				that.district[this.valueRegion[0]].c.forEach((item, i) => {
					if (this.region[1] == item.c) {
						this.valueRegio[1] = i
						this.multiIndex[1] = i
					}
					city.push(item.n);
				});
				that.district[this.valueRegion[0]].c[this.valueRegion[1]].c.forEach((item, i) => {
					if (this.region[2] == item.c) {
						this.valueRegio[2] = i
						this.multiIndex[2] = i
					}
					area.push(item.n);
				});
				this.multiArray = [province, city, area]
			},
			bindRegionChange: function(e) {
				let multiIndex = this.multiIndex,
					province = this.district[multiIndex[0]] || {
						c: []
					},
					city = province.c[multiIndex[1]] || {
						v: 0
					},
					multiArray = this.multiArray,
					value = e.detail.value;
			
				this.region = [multiArray[0][value[0]], multiArray[1][value[1]], multiArray[2][value[2]]]
				this.cityId = city.v
				this.valueRegion = [0, 0, 0]
				this.initialize();
			},
			bindMultiPickerColumnChange: function(e) {
				let that = this,
					column = e.detail.column,
					value = e.detail.value,
					currentCity = this.district[value] || {
						c: []
					},
					multiArray = that.multiArray,
					multiIndex = that.multiIndex;
				multiIndex[column] = value;
				switch (column) {
					case 0:
						let areaList = currentCity.c[0] || {
							c: []
						};
						multiArray[1] = currentCity.c.map((item) => {
							return item.n;
						});
						multiArray[2] = areaList.c.map((item) => {
							return item.n;
						});
						break;
					case 1:
						let cityList = that.district[multiIndex[0]].c[multiIndex[1]].c || [];
						multiArray[2] = cityList.map((item) => {
							return item.n;
						});
						break;
					case 2:
			
						break;
				}
				// #ifdef MP || APP-PLUS
				this.$set(this.multiArray, 0, multiArray[0]);
				this.$set(this.multiArray, 1, multiArray[1]);
				this.$set(this.multiArray, 2, multiArray[2]);
				// #endif
				// #ifdef H5 
				this.multiArray = multiArray;
				// #endif
				this.multiIndex = multiIndex
			},
			// 授权回调
			onLoadFun: function() {
				this.getUserAddress();
			},
			// 授权关闭
			authColse: function(e) {
				this.isShowAuth = e
			},
			toggleTab(str) {
				this.$refs[str].show();
			},
			
			onConfirm(val) {
				this.region = val.checkArr[0] + '-' + val.checkArr[1] + '-' + val.checkArr[2];
			},
			getUserAddress: function() {
				if (!this.id) return false;
				let that = this;
				getAddressDetail(this.id).then(res => {
					let region = [res.data.province, res.data.city, res.data.district];
					that.$set(that, 'userAddress', res.data);
					that.$set(that, 'region', region);
					console.log(this.region)
					that.cityId = res.data.city_id
				});
			},
			ChangeIsDefault: function(e) {
				this.$set(this.userAddress, 'is_default', !this.userAddress.is_default);
			},
		}
	}
</script>

<style lang="scss">
	.oborder {
		width: 80rpx;
		height: 80rpx;
		border-radius: 100rpx;
		overflow: hidden;
	
		image {
			width: 100%;
			height: 100%;
		}
	}
.odiput {
		margin-bottom: 60rpx;


		.odiv {
			display: flex;
			justify-content: space-between;
			align-items: center;
			background-color: #fff;
			border-bottom: 2rpx solid #eee;
			padding: 30rpx;

			.dizhi {
				display: flex;
				align-items: center;

				image {
					vertical-align: middle;
				}
			}

			span:nth-child(1) {
				font-weight: 600;
				font-size: 28rpx;
				line-height: 44rpx;
				text-align: left;
				color: #161616;

				.xxing {
					font-weight: 600;
					font-size: 32rpx;
					line-height: 44rpx;
					text-align: left;
					color: #e33c21;
				}
			}

			span:nth-child(2) {
				input {
					text-align: right;
				}
			}

			view {
				display: flex;
				font-weight: 400;
				font-size: 32rpx;
				line-height: 44rpx;
				text-align: left;
				color: #a0a0a0;

				.logo {
					width: 100%;
					height: 100%;
					margin-left: 0rpx;
				}

				input {
					text-align: right;
				}

				image {
					margin-left: 10rpx;
					width: 14rpx;
					height: 28rpx;
					vertical-align: middle;
				}
			}
		}
	}

	.bacoc {

		margin: auto;
		width: 464rpx;
		height: 96rpx;
		border-radius: 48rpx;
		background: #e33c21;
		box-shadow: 0 12rpx 36rpx rgba(193, 0, 0, 0.1);
		font-weight: 600;
		font-size: 34rpx;
		line-height: 96rpx;
		text-align: center;
		color: #fff;
	}
</style>
